{% extends 'layout.html' %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/theme.default.css">
    <link rel="stylesheet" href="/static/css/commons.css">
    <style>
        .tag {
            display: inline-block;
            border: 1px solid black;
            padding: 5px;
            background-color: chocolate;
            cursor: pointer;
        }
        .modal_button {
            float: right;
            margin-top: 50px;
            margin-right: 20px;
        }

        #cls-mod:hover {
            color: #ba2121;
        }
        .alink {
            background: #999;
            font-weight: 400;
            border-radius: 13px;
            padding: 5px 10px;
            font-size: 12px;
            letter-spacing: 0.5px;
            color: #fff!important;
        }
        .condition a{
            display: inline-block;
            padding: 0px 10px;
            font-size: 13px;
            margin-bottom: 10px;
            cursor: pointer;
            line-height: 26px;
        }
        .condition a.active{
            background: #148aff;
            color: #fff;
            border-radius: 13px;
            border: none;
        }
        .condition span {
            display: inline-block;
            background: #e6f2ff;
            line-height: 26px;
            border-radius: 13px;
            color: #148aff;
            padding: 0 10px;
        }
        .pagination a{
            padding: 5px 10px;
            border: 1px solid #e1e2e3;
            margin: 0px 3px;
        }
        .pagination a.active{
            border: 0;
            font-weight: 600;
            color: #333;
        }

    </style>
{% endblock %}

{% block content %}
    <ol class="breadcrumb" style="margin-bottom: 0px">
        <li><a href="/asset-0-0">首页</a></li>
        <li class="active">资产管理</li>
    </ol>


<div class="localmodal hide">
    <div class="header">
        <div style="float: left">是否清除?</div>
        <div class="xicon">X</div>
    </div>
<div class="modal_button">
    <input id="id_cancel"  style="background: #dddddd;color: black" type="submit" value="取消">
    <input id="id_confirm" style="background: #ba2121;margin-left: 15px" type="submit" value="确定">
</div>
</div>
    <div class="localshadow hide"></div>

    <div style="padding: 5px 8px;">
        <div class="list-block">
            <div class="clearfix search-area">
                <div class="col-md-offset-4 do-submit">
                    <a id="search_condition_submit" class="btn btn-primary no-radius">
                        <i class="fa fa-search"></i> 搜索
                    </a>
                </div>

                <div id="search_conditions" class="col-md-4">
                    <div class="condition-cmdb">
                        <div class="icons">
                            <a class="btn btn-default no-radius" onclick="AddSearchCondition(this)"><i
                                    class="fa fa-plus-square"></i></a>
                        </div>
                        <div class="inputs">
                            <div class="input-group">
                                <div id="search_condition" init="false" class="input-group-btn">
                                    <label type="button" class="btn btn-default no-radius" style="width: 100px;">&nbsp;</label>
                                    <button type="button" class="btn btn-default dropdown-toggle no-border-r" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="caret"></div></button>
                                    <ul class="change-search-condition dropdown-menu">

                                    </ul>
                                </div>


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        <!--<a href="/add_asset/" class="alink"><img src="/static/image/tooltag-add.svg" alt="">资产</a>
        <a href="/add_model/" class="alink"><img src="/static/image/tooltag-add.svg" alt="">添加型号</a>
        <a href="/add_employee/" class="alink"><img src="/static/image/tooltag-add.svg" alt="">领用人</a>-->



            <div class="clearfix function-area">
                <div class="btn-group btn-group-sm custom-btn-group">
                  <a href="/add_asset/" class="btn btn-default">添加资产</a>
                  <a href="/add_model/" class="btn btn-default">添加型号</a>
                  <a href="/add_employee/" class="btn btn-default">添加领用人</a>
                  <a id="idCheckAll" class="btn btn-default">全选</a>
                  <a id="idReverse" class="btn btn-default">反选</a>
                  <a id="idCancel" class="btn btn-default">取消</a>
                  <a id="IdEditMode" class="btn btn-default">进入编辑模式</a>
                  <a id="idSave" class="btn btn-default" >保存</a>
                  <a class="btn btn-default">批量删除</a>
                  <a id="handle_status" class="btn no-radius" tabindex="0" role="button" data-toggle="manual"
                   data-trigger="focus" data-container="body" data-html="true" data-placement="bottom" title="错误详细"
                   data-content="">
                  </a>
                </div>
            </div>

            <div class="table-responsive table-area">
                <table class="table table-hover table-bordered">
                    <thead id="table-th">
                        <tr>
                        </tr>
                    </thead>
                    <tbody id="table-tb">
                    </tbody>
                </table>

                 <div class="pagination">
                    {{ str_pager | safe }}
                 </div>
            </div>

            <!--<div class="col-lg-2">
            <div class="input-group">
              <input id="q" type="text" class="form-control" placeholder="Search for..." value="{{ q }}">
              <span class="input-group-btn">
                <a id="search" class="btn btn-default"  href="/asset-0-0/?q={{ paras }}">Go</a>
              </span>
              </div>
            </div>
            </div>-->

        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="/static/js/jquery.tablesorter.js"></script>
    <script src="/static/js/jquery.tablesorter.widgets.js"></script>
    <script>
        $(function () {
            init()
            $("[data-toggle='popover']").popover({
                'trigger': 'hover',
                'title': '配置',
                'html': true,
            });
            $('#menu_teacher').addClass('active')
            bindEditMode();
            bindCheckbox();
            bindidSave();
            //bindSubmitSearchCondition();
            bindSearchCondition();

        })

        function bindSearchCondition(){
            bindChangeSearchCondition();
            bindSubmitSearchCondition();
        }



        $('#idCheckAll').click(function () {
            $('#table-tb').find(':checkbox').each(function () {
                if($('#IdEditMode').hasClass('btn-warning')){
                    if($(this).prop('checked')){

                    }else {
                        $(this).prop('checked', true)
                        $currentTr = $(this).parent().parent()
                        trInToEditMode($currentTr)
                    }
                }else {
                    $(this).prop('checked',true)
                }
            })
        })

        $('#idCancel').click(function () {
            $('#table-tb').find(':checked').each(function () {
                if($('#IdEditMode').hasClass('btn-warning')){
                    $(this).prop('checked',false)
                    $currentTr = $(this).parent().parent()
                    trOutEditMode($currentTr)
                }else {
                    $(this).prop('checked',false)
                }
            })
        })

        $('#idReverse').click(function () {
            $('#table-tb').find(':checkbox').each(function () {
                if ($('#IdEditMode').hasClass('btn-warning')) {
                    if ($(this).prop('checked')) {
                        $(this).prop('checked', false)
                        $currentTr = $(this).parent().parent()
                        trOutEditMode($currentTr)
                    } else {
                        $(this).prop('checked', true)
                        $currentTr = $(this).parent().parent()
                        trInToEditMode($currentTr)
                    }
                } else {
                    if ($(this).prop('checked')) {
                        $(this).prop('checked', false)
                    } else {
                        $(this).prop('checked', true)
                    }
                }
            })
        })
        
        function bindEditMode() {
            $('#IdEditMode').click(function () {
                $(this)
                if ($(this).hasClass('btn-warning')) {
                    //退出编辑模式
                    $(this).removeClass('btn-warning')
                    $(this).text('进入编辑模式')
                    $('#table-tb').find(':checked').each(function () {
                        var $currentTr = $(this).parent().parent()
                        trOutEditMode($currentTr)
                    })
                } else {
                    //进入编辑模式
                    $(this).addClass('btn-warning')
                    $(this).text('退出编辑模式')
                    $('#table-tb').find(':checked').each(function () {
                        var $currentTr = $(this).parent().parent()
                        $currentTr.addClass('success')
                        trInToEditMode($currentTr)
                    })
                }
            })
        }
        
        function bindCheckbox() {

                $('#table-tb').on('click', ':checkbox', function () {
                    if ($('#IdEditMode').hasClass('btn-warning')) {
                        var ck = $(this).prop('checked')
                        if (ck) {
                            //进入编辑模式
                            console.log('进入编辑模式')
                            $currentTr = $(this).parent().parent()
                            trInToEditMode($currentTr)
                        } else {
                            //退出编辑模式
                            $currentTr = $(this).parent().parent()
                            $currentTr.removeClass('success')
                            console.log('退出编辑模式')
                            trOutEditMode($currentTr)
                        }
                    }
                })
            }



        function trInToEditMode($tr) {
            $tr.addClass('success')
            $tr.attr('has-edit','true')
            $tr.children().each(function () {
                var editEnable = $(this).attr('edit-enable')
                var editType = $(this).attr('edit-type')
                if(editEnable == 'true'){
                    if(editType == 'input'){
                        var innerText = $(this).text()
                        var tag = document.createElement('input')
                        tag.value = innerText
                        $(this).html(tag)
                    }else if(editType == 'select'){
                         var innerText = $(this).text()
                         var globalName = $(this).attr('global-name')
                         //console.log('window[globalName]',window[globalName])
                         var sel = document.createElement('select')
                         var origin = $(this).attr('origin')
                         $.each(window[globalName],function (k1,v1) {
                             console.log('----->v1',v1)
                             var op = document.createElement('option')
                            /* if(innerText == v1[1]){
                                 op.setAttribute('selected','selected')
                                 op.setAttribute('value',v1[0])
                             } */

                             {#$.each(v1,function (k,v) {#}
                             {#    $(op).attr(k,v)#}
                             {#    $(op).innerHTML(v)#}
                             //)}
                             op.setAttribute('value',v1.id)
                             op.innerHTML = v1.name
                             sel.append(op)
                         })
                         $(sel).val(origin)
                         $(this).html(sel)
                         //x = $('select')
                         //console.log('-->x',x)
                         //var innerSelect = x[0].selectedOptions[0].text
                         //console.log('-->innerSelect',innerSelect)
                         //tag.value = innerSelect
                         //tag.option.val() = innerSelect
                         //$(this).html(tag)
                    }
                }
            })
        }
        
        function trOutEditMode($tr) {
            $tr.removeClass('success')
            $tr.children().each(function () {
                var editEnable = $(this).attr('edit-enable')
                var editType = $(this).attr('edit-type')
                if(editEnable == 'true'){
                    if(editType == 'select') {
                        var $select = $(this).children().first()
                        var newId = $select.val()
                        newText = $select[0].selectedOptions[0].innerHTML
                        $(this).attr('new-val',newId)
                        $(this).html(newText)
                    }else if (editType == 'input') {
                        var $input = $(this).children().first()
                        newValue = $input.val()
                        $(this).html(newValue)
                        $(this).attr('new-val',newValue)
                    }
                }
            })
        }

        function delRow(ths) {
            $('.localmodal').removeClass('hide')
            $('.localshadow').removeClass('hide')
            rowid = $(ths).parent().parent().attr('nid')
            $('#id_confirm').click(function () {
                $.ajax({
                url: '/clear_asset',
                type: 'get',
                dataType: 'json',
                data: {'rowid': rowid},
                success: function (data) {
                    window.location.reload()
                }
            })
            })
        }

        $('#search').click(function () {
            q = $('#q').val()
            $.ajax({
                url: '/asset-0-0/?q=' + q,
                type: 'get',
                data: {'q': q},
                success: function (data) {
                    window.location.replace('/asset-0-0?q=' + q)
                }
            })
        })

        $('#id_cancel').click(function () {
            $('.localmodal,.localshadow').addClass('hide')
        })
        $('.xicon').click(function () {
            $('.localmodal,.localshadow').addClass('hide')
        })

    requestUrl = '/asset-json/'
    function init() {
        var conditions = JSON.stringify(aggregationSearchCondition())
        $.ajax({
            url: requestUrl,
            type: 'get',
            traditional:true,
            data: {'condition':conditions},
            dataType:'json',
            success:function (result) {
                initGlobalData(result.global_dict)
                initHeader(result.table_config);
                initBody(result.table_config,result.data_list);
                initSearchCondition(result.condition_config);

                BindDoSingleCheck('#table-tb',null,null);
            },
            error: function () {
                alert('请求异常')
            }
        })
    }
    function initHeader(table_config) {
        tr = document.createElement('tr')
        $.each(table_config,function (k,item) {
            //console.log(k,item) // 0 {q: "sn", title: "1111111111", display: true}
            th = document.createElement('th')
            if(item.display) {
                th.innerHTML = item.title
                tr.append(th)
            }
        })
        $('#table-th').empty()
        $('#table-th').append(tr)
    }

    String.prototype.format = function(kwargs){
            var ret = this.replace(/\{(\w+)\}/g,function (km,m) {
            return kwargs[m]
        })
            return ret
        }

    v = 'xxx{m}'
    r = v.format({'m':'123'})
    //console.log('-->r',r)

    function initBody(table_config,data_list) {
        console.log('-->data_list',data_list)
        $('#table-tb').empty()
        $.each(data_list,function (k,row) {
            tr = document.createElement('tr')
            tr.setAttribute('row-id',row['id'])

            $.each(table_config,function (k,colconfig) {
                if(colconfig.display){
                    var td = document.createElement('td')
                    //td.setAttribute('name','alex')
                    /* 生成文本信息 */
                    var kwargs ={}
                    $.each(colconfig.text.kwargs,function (key,value) {
                        if (value.substring(0,2) == '@@'){
                            var globalName =  value.substring(2,value.length)
                            var currentId = row[colconfig.q]

                            var t = getTextFromGlobalById(globalName,currentId)
                            kwargs[key] = t
                        }
                        else if(value[0] == '@'){
                            kwargs[key] = row[value.substring(1,value.length)]
                        }
                        else {
                            kwargs[key] = kwargs[value]
                        }
                    })

                    td.innerHTML = colconfig.text.content.format(kwargs)
                    $.each(colconfig.attrs,function (key,value) {
                        if(value[0] == '@'){
                            //console.log('-->row',row)
                            td.setAttribute(key,row[value.substring(1,value.length)])
                        }else {
                            td.setAttribute(key,value)
                        }
                    })

                    $(tr).append(td)
                }
            })
            $('#table-tb').append(tr)
        })
    }
    
    function getTextFromGlobalById(globalName,currentId) {
        var ret = null
        $.each(window[globalName],function (k,item) {
            {#console.log(item[0],item[1],currentId)#}
            if(item[0] == currentId){
                ret = item[1]
                return
            }
        })
        return ret
    }
    function initGlobalData(global_dict) {
        $.each(global_dict,function (k,v) {
            window[k] = v
        })
    }

    function bindidSave() {
        $('#idSave').click(function () {
            var postList = []
                $('#table-tb').find('tr[has-edit="true"]').each(function () {
                $('#IdEditMode').removeClass('btn-warning')
                $('#IdEditMode').text('进入编辑模式')
                trOutEditMode($(this))
                var temp = {}
                var id = $(this).attr('row-id')
                temp['id'] = id
                console.log('-->temp',temp)
                console.log('-->$(this)',$(this).children()[0])
                $(this).children('[edit-enable="true"]').each(function () {
                    $(this).prop('checked',false)
                    $(this).text('进入编辑模式')
                    var name = $(this).attr('name')
                    console.log('-->save name',name)
                    var newVal = $(this).attr('new-val')
                    console.log('-->new-val',newVal)
                    var origin = $(this).attr('origin')
                    if(origin != newVal){
                        temp[name] = newVal
                    }
                })
                postList.push(temp)
            })

            console.log('-->postList',postList)
            $.ajax({
                url:requestUrl,
                type:'put',
                data:{'post_list':JSON.stringify(postList)},
                dataType: 'json',
                success:function (response) {
                    if(response.status){
                        init()
                        SuccessHandleStatus(response.message)
                    }else {
                        ErrorHandleStatus(response.message,response.error)
                    }
                    refreshData()
                }
            })
        })
    }

    function SuccessHandleStatus(content) {
        var $handle_status = $('#handle_status');
        $handle_status.popover('destroy');
        var msg = "<i class='fa fa-check'></i>" + content;
        $handle_status.empty().removeClass('btn-danger').addClass('btn-success').html(msg);
        setTimeout(function () {
            $handle_status.empty().removeClass('btn-success btn-danger')
        },3000)
    }
    function ErrorHandleStatus(content, errorList) {
        var $handle_status = $('#handle_status');
        $handle_status.attr('data-toggle', 'popover');
        console.log('----->content',content)
        var errorStr = '';
        $.each(errorList, function (k, v) {
            errorStr = errorStr + v.num + '. ' + v.message + '</br>';
        });

        $handle_status.attr('data-content', errorStr);
        $handle_status.popover();

        var msg = "<i class='fa fa-info-circle'></i>" + content;
        $handle_status.empty().removeClass('btn-success').addClass('btn-danger').html(msg);

    }

    function refreshData() {
        init();
    }

    function aggregationSearchCondition() {
        var ret = {};
        $("#search_conditions").children().each(function () {
            var $condition = $(this).find("input[is-condition='true'],select[is-condition='true']");
            var name = $condition.attr('name');
            console.log('-->$condition',$condition[0]) // $condition为select框
            var value = $condition.val();
            console.log('->aggregationSearchCondition',value)
            if (!$condition.is('select')) {
                name = name + "__contains";
            }
            if (value) {
                if(name == 'mod__type__name'){
                    console.log('-->name',name)
                    //var valList = $('select[name="mod__type__name"]')[0].selectedOptions[0].text
                    var valList = $condition[0].selectedOptions[0].text.trim().split();
                    console.log('-->valList',valList) //["台式主机"]
                }else if (name == 'mod__name'){
                    var valList = $condition[0].selectedOptions[0].text.trim().split();
                }
                else {
                    var valList = $condition.val().trim().replace('，', ',').split(',');
                }
                if (ret[name]) {
                    ret[name] = ret[name].concat(valList); //concat 连接两个或多个数组
                } else {
                    ret[name] = valList;
                }
                console.log('-->ret',ret)
            }
        });
        return ret;
    }
    function AddSearchCondition(ths) {
        var $duplicate = $(ths).parent().parent().clone(true);
        console.log('AddSearchCondition',$duplicate)
        $duplicate.find('.fa-plus-square').addClass('fa-minus-square').removeClass('fa-plus-square');
        $duplicate.find('a[onclick="AddSearchCondition(this)"]').attr('onclick', "RemoveSearchCondition(this)");

        $duplicate.appendTo($(ths).parent().parent().parent());
    }
    function RemoveSearchCondition(ths) {
        $(ths).parent().parent().remove();
    }
    function bindSubmitSearchCondition() {
        $('#search_condition_submit').click(function () {
            init();

        });
    }
    function bindChangeSearchCondition() {
        $('#search_condition').find('ul').delegate('li', 'click', function () {
            var name = $(this).attr('name');
            var text = $(this).text();
            var condition_type = $(this).attr('condition-type');
            var global_name = $(this).attr('global-name');
            var tag;
            if (condition_type == 'input') {
                tag = CreateInput({
                    'is-condition': 'true',
                    'class': 'form-control no-radius',
                    'name': name,
                    'placeholder': '逗号分割多条件'
                }, {});
            } else if (condition_type == 'select') {
                tag = CreateSelect({
                    'is-condition': 'true',
                    'class': 'form-control select-icon no-radius',
                    'name': name
                }, {}, window[global_name], null, 'id', 'name');
            }
            var $current = $(this).parent().parent();
            $current.children().first().text(text);
            $current.next().remove();
            $current.after(tag);

        });
    }

    function initSearchCondition(config) {
        var $search_condition = $('#search_condition');
        if ($search_condition.attr('init') == 'true') {
            return
        }
        if (config.length > 0) {
            var first_item = config[0];
            console.log('-->first_item',first_item)
            initDefaultSearchCondition(first_item);
        }

        $.each(config, function (k, v) {
            var condition_type = v['condition_type'];
            var tag = document.createElement('li');
            var a = document.createElement('a');
            a.innerHTML = v['text'];
            $(tag).append(a);
            tag.setAttribute('name', v['name']);
            tag.setAttribute('condition-type', condition_type);
            if (condition_type == 'select') {
                tag.setAttribute('global-name', v['global_name']);
            }
            $('#search_condition').find('ul').append(tag);
        });
        $search_condition.attr('init', 'true');
        $('table').tablesorter()
    }
    function initDefaultSearchCondition(item) {
        // item:{'name': 'mod__type__name', 'text': '类别', 'condition_type': 'select', 'global_name': 'mod__type__name'}
        var tag;
        if (item.condition_type == 'input') {
            tag = CreateInput({
                'is-condition': 'true',
                'class': 'form-control no-radius',
                'name': item.name,
                'placeholder': '逗号分割多条件'
            }, {});
        } else if (item.condition_type == 'select') {
            tag = CreateSelect({
                'is-condition': 'true',
                'class': 'form-control select-icon no-radius',
                'name': item.name
            }, {}, window[item.global_name], null, 'id', 'name');
        }
        var $current = $('#search_condition');
        $current.children().first().text(item.text); //找到label标签，生成'资产状态'
        $current.after(tag);

    }
    function CreateSelect(attrs, csses, option_data_list, current_value, key_value, key_text) {
            console.log('-->option_data_list',option_data_list)
            //  option_data_list-->{id: 1, name: "空闲"},这样的数据格式来自view的models.Type.objects.values_list('id','name'))
            var sel = document.createElement('select');
            $.each(attrs, function (k, v) {
                $(sel).attr(k, v);
            });
            $.each(csses, function (k, v) {
                $(sel).css(k, v);
            });
            $.each(option_data_list, function (k, v) {

                //  全局变量status_choices-->0: [1, "空闲"]
                //
                //  0: {id: 1, name: "台式主机"}
                //  1: {id: 2, name: "显示器"}
                var opt1 = document.createElement('option');
                var sel_text = v[key_text]; // v['name']
                var sel_value = v[key_value]; // v={id: 1, name: "空闲"},v['id']即1;sel_text与sel_value是从全局变量取来的
                console.log('-->current_value',current_value)
                if (sel_value == current_value) {
                    $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
                    $(opt1).prop('selected', true);
                } else {

                    $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
                }
            });
            return sel;
        }
        function CreateInput(attrs, csses) {
            var obj = document.createElement('input');
            $.each(attrs, function (k, v) {
                $(obj).attr(k, v);
            });
            $.each(csses, function (k, v) {
                $(obj).css(k, v);
            });
            return obj
        }
        function BindDoSingleCheck(tableBody, specialInEditFunc, specialOutEditFun) {
            $(tableBody).delegate(':checkbox', 'click', function () {
                var $tr = $(this).parent().parent();
                if ($(this).prop('checked')) {
                    if ($(tableBody).attr('edit-mode') == 'true') {
                        //this row switch in edit mode
                        $tr.addClass('success');
                        DoTrIntoEdit($tr, specialInEditFunc);
                    }
                } else {
                    if ($(tableBody).attr('edit-mode') == 'true') {
                        //this row switch out edit mode
                        $tr.removeClass('success');
                        DoTrOutEdit($tr, specialOutEditFun);
                    }
                }

            });
        }
    </script>
{% endblock %}